<template>
    <div class="brand-com">
        <ul>
            <li><a href="#"><img src="../../images/brand1.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand2.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand3.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand4.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand5.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand6.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand7.png" alt="">
                <p>耐克
                </p>
            </a></li>
            <li><a href="#"><img src="../../images/brand8.png" alt="">
                <p>耐克
                </p>
            </a></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "brand"
    }
</script>

<style scoped>
    .brand-com{
        padding: 0px 10px;
    }
    .brand-com img{
        width: 100%;
    }
    .brand-com a{
        display: block;
    }
    .brand-com ul{
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 10px 0;
    }
    .brand-com ul li{
        width: 25%;
        float: left;
    }
    .brand-com ul li img{
        width: 100%;
    }
    .brand-com ul li a p{
        text-align: center;
    }
</style>